<template>
  <li v-if="divider" class="roy-context-divider"></li>

  <li
    v-else
    :class="classname"
    @click="handleClick"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
  >
    <slot></slot>
  </li>
</template>

<script setup>
import { defineComponent, defineEmits, defineProps, ref, computed, inject } from 'vue'
const emit = defineEmits(['click', 'mouseenter', 'mouseleave'])
const props = defineProps({
  divider: Boolean,
  disabled: Boolean,
  autoHide: {
    type: Boolean,
    default: true
  }
})

const hover = ref(false)
const contextmenu = inject('$$contextmenu')
const classname = computed(() => ({
  'roy-context-item': !props.divider,
  'roy-context-item--hover': hover.value,
  'roy-context-item--disabled': props.disabled
}))
const handleMouseenter = (event) => {
  if (props.disabled) {
    return
  }
  hover.value = true
  emit('mouseenter', props, event)
}
const handleMouseleave = (event) => {
  if (props.disabled) {
    return
  }
  hover.value = false
  emit('mouseleave', props, event)
}
const handleClick = (event) => {
  if (props.disabled) {
    return
  }
  emit('click', props, event)
  console.log('handleMouseleave')
  if (props.autoHide) {
    contextmenu.hide()
  }
}
// return {
//   hover,
//   classname,
//   handleMouseenter,
//   handleMouseleave,
//   handleClick
// };

</script>
